<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../src/css/index.css">
    <link rel="stylesheet" href="../src/css/cash.css">
    <link rel="stylesheet" href="../src/lib/layui/css/layui.css">
    <style>
        /* .btn:disabled {
            background-color: grey;
        }

        select #city {
            display: none;
        }

        select#country {
            display: none;
        } */
    </style>
</head>

<body>
    <!-- 头部 -->
    <div id="head"></div>
    <!-- 收货信息 -->
    <div id="shouhuo">
        <h3>收货信息</h3>
    </div>
    <div id="dizhi">
        <div id="dizhi_a"><i class="layui-icon layui-icon-location"></i>默认地址：&nbsp;&nbsp;&nbsp;&nbsp;<div>地址管理</div>
        </div>
        <div id="dizhi_b">收货人：</div>
        <div id="dizhi_b">联系方式：</div>
        <div id="dizhi_b">收货地址:</div>
        <div id="dizhi_e">
            <a href="#">切换地址</a>
            <br><br>
            <span><i class="layui-icon layui-icon-add-1"></i>新建地址</span>
        </div>
        <div id="dizhi_f">
            <div id="shouhuoren">
                <span>收货人：</span><input type="text">
                <span>联系方式：</span><input type="text">
            </div>
            <!-- 三级导航 -->
            <div id="sanji">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;所在区域：
                <!-- 省份选择 -->
                <select id="prov" name="prov" onchange="showCity(this)">
                    <option>请选择省份</option>
                </select>
                <!-- 城市选择 -->
                <select id="city" onchange="showCountry(this)">
                    <option>请选择城市</option>
                </select>
                <!-- 区县选择 -->
                <select id="country" onchange="selectCountry(this)">
                    <option>请选择县区</option>
                </select>
            </div>
            <!-- 详细地址 -->
            <div id="dizhi">
                &nbsp;&nbsp;&nbsp;详细地址：
                <br><textarea name=""  cols="30" rows="10" ></textarea>
                <div id="dizhi_right">
                    <div id="sheding">
                        <input type="checkbox">&nbsp;&nbsp;&nbsp;设为默认值
                    </div>
                    <div id="queding">
                        <span>确定</span><a href="#">取消</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="order">
        <span style="display: block; width: 400px;">商品信息</span>
        <span style="display: block;width: 270px;">单价</span>
        <span style="display: block;width: 230px;">数量</span>
        <span style="display: block;width: 120px;">小计</span>

    </div>
    <div id="order_boss">
        <!-- <div id="order_biao">
            <div id="order_img"><img
                    src="https://img.suofeiya.com.cn/images/202007/b5ccf3c7032a07b0be67096ab0e45ffd.jpg" alt=""></div>
            <div id="order_a">
                <span>索菲亚屏风式拼色门厅隔断柜</span>
                <p>规格:定制诚意金（具体价格以设计方案为准，详情<br>咨询客服）</p>

            </div>
            <div id="order_b">￥500.00</div>
            <div id="order_c">1</div>
            <div id="order_d">￥500.00</div>
        </div> -->


    </div>
    <div id="order_dowm">
        <div id="order_dowm_a">
            <div id="aa">发票信息<i class="layui-icon layui-icon-help"></i></div>
            <div id="bb">
                <p>给我们留言</p>
                <input type="text" placeholder="选填：对本次交易的说明">
            </div>
        </div>
        <div id="order_dowm_b">
            <p>商品总金额：￥<span id="zong"></span></p>
            <p>特权金抵扣金额：-￥0</p>
            <p>优惠券抵扣金额：-￥0</p>

        </div>
        <div id="order_dowm_c">实付款：<span>￥<span id="priceTotal"><span></span></div>
        <div id="order_dowm_d">
            <div>提交订单</div>
        </div>

    </div>
    <!-- 底部 -->
    <div id="foot"></div>
</body>
<script src="../src/lib/jquery-1.11.3.js"></script>
<script src="../src/lib/layui/layui.js" charset="utf-8"></script>
<script src="../src/js/fetch.js"></script>
<script src="../src/js/tools.js"></script>
<script src="../src/js/cash.js" type="module"></script>
<script src="../src/js/aa.js"></script>
<script>
    $('#head').load('../layout/head.html')
    $('#foot').load('../layout/foot.html')

</script>
<script>
    $(function () {
        var current_prov;
        var current_city;
        var current_country;
        /* 自动加载省份列表 */
        showPro();
    });
    function showPro() {
        $(".btn").disabled = true;
        var len = province.length;
        for (var i = 0; i < len; i++) {
            var provOpt = document.createElement("option");
            provOpt.innerText = province[i]['name'];
            provOpt.value = i;
            prov.appendChild(provOpt);
        }
    };
    /*根据所选的省份来显示城市列表*/
    function showCity(obj) {
        var val = obj.options[obj.selectedIndex].value;
        current_prov = val;
        if (val >= 0) {
            city.style.display = 'inline-block';
            country.style.display = 'none';
        } else {
            city.style.display = 'none';
            country.style.display = 'none';
        }
        if (val != null) {
            city.length = 1;
            if (province[val]) {
                var cityLen = province[val]["city"].length;
            }
            for (var j = 0; j < cityLen; j++) {
                var cityOpt = document.createElement('option');
                cityOpt.innerText = province[val]["city"][j].name;
                cityOpt.value = j;
                city.appendChild(cityOpt);
            }
        }
    };
    /*根据所选的城市来显示县区列表*/
    function showCountry(obj) {
        var val = obj.options[obj.selectedIndex].value;
        if (val >= 0) {
            country.style.display = 'inline-block';
        } else {
            country.style.display = 'none';
        }
        current_city = val;
        if (val != null) {
            country.length = 1;
            if (province[current_prov]["city"][val]) {
                var countryLen = province[current_prov]["city"][val].districtAndCounty.length;
            }
            if (countryLen == 0) {
                addrShow.value = province[current_prov].name + '-' + province[current_prov]["city"][val].name;
                return;
            }
            for (var n = 0; n < countryLen; n++) {
                var countryOpt = document.createElement('option');
                countryOpt.innerText = province[current_prov]["city"][val].districtAndCounty[n];
                countryOpt.value = n;
                country.appendChild(countryOpt);
            }
        }
    };

    function selectCountry(obj) {
        current_country = obj.options[obj.selectedIndex].value;
        $(".btn").disabled = false;

    };
    function showAddr() {
        var ss = province[current_prov].name + "|" +
            province[current_prov]['city'][current_city].name + "|" +
            province[current_prov]['city'][current_city]['districtAndCounty'][current_country];
        $("#addr-show").val(ss);
    }
</script>
<script>
    var xinjian=document.querySelector('#dizhi_e span')
    xinjian.onclick=function(){
        $('#dizhi_f').css('display','block')
    }
    var quxiao=document.querySelector('#queding a')
    quxiao.onclick=function(){
        $('#dizhi_f').css('display','none')
    }
</script>
</html>